import React from 'react';
import 'bootstrap/dist/css/bootstrap.css'


class Test01 extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [
                {id: 1, name: "aaaaaa"},
                {id: 2, name: "bbbbbb"},
                {id: 3, name: "cccccc"},
                {id: 4, name: "dddddd"},
                {id: 5, name: "eeeeee"},
                {id: 6, name: "ffffff"},
            ]
        }
    }

    render(){
        let items = this.state.items;
        return (
            <div className="items-panel">
                {items}
            </div>
        )
    }

    sortUp(index){
        this.resort(index, -1);
    }

    sortDown(index){
        this.resort(index, 1);
    }

    resort(index, diff){
        let items = this.state.items;
        let item = items[index];
        items.splice(index, 1);
        items.splice(index + diff, 0, item);
        this.setState({items:items})
    }
}


export default Test01;